<template>
  <div class="model">
    <div class="panelWrap">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>{{ isEdit ? '修改电梯型号' : '添加电梯型号' }}</div>
        <i class="el-icon-close" @click="handleCloseDialog" />
      </div>
      <div class="model-main">
        <div class="con flexcenter flexdc">
          <div class="con-row co-row m-t-20">
            <div class="flex flexac">
              <span class="name"><span class="mustval">*</span>生产厂家：</span>
              <div class="pre">
                <el-select v-model="data.manufacturerunitId" class="input" placeholder="请选择生产厂家...">
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </div>
            </div>
          </div>
          <div class="con-row co-row m-t-20">
            <div class="flex flexac">
              <span class="name"><span class="mustval">*</span>电梯型号：</span>
              <div class="pre">
                <el-input v-model="data.name" class="input" placeholder="请输入电梯型号..." />
              </div>
            </div>
          </div>
          <div class="con-row">
            <div class="flex flexac m-t-20">
              <span class="area-name">备注：</span>
              <el-input
                v-model="data.remark"
                :autosize="{ minRows: 4, maxRows: 5}"
                resize="none"
                type="textarea"
                class="area-input"
                placeholder="请输入备注信息..."
              />
            </div>
          </div>
        </div>

        <div class="flexcenter footerBtn  m-t-30">
          <el-button v-if="!isEdit" class="saveBtn btn m-r-30 el-icon-circle-check" @click="handleSave(0)">保 存</el-button>
          <el-button v-else type="success" class="m-r-30 btn el-icon-circle-check" @click="handleSave(1)">更 新</el-button>
          <el-button class="clsoeBtn btn el-icon-circle-close" @click="handleCloseDialog">关 闭</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import { createModelAdd, updateModelArticle } from '@/api/elevator/elevatorModel'
import { fetchFactureList } from '@/api/elevator/facturer'
import { showNotice } from '@/utils/toolclass'

export default {
  props: {
    data: {
      type: Object,
      default: () => ({})
    },
    isEdit: {
      type: Boolean
    }
  },
  data() {
    return {
      options: [],
      param: {
        id: '',
        name: '',
        pageIndex: 1,
        pageSize: 20
      }
    }
  },
  watch: {},
  created() {
    this.getManufactor()
  },
  methods: {
    getManufactor() {
      fetchFactureList(this.param.id, this.param.name, this.param.pageIndex, this.param.pageSize).then(res => {
        if (res.code === '000000') {
          this.options = res.data
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleSave(t) {
      if (!(/^\S+$/.test(this.data.manufacturerunitId))) {
        showNotice('error', '提示', '请输入生产厂家')
        return
      }
      if (!(/^\S+$/.test(this.data.name))) {
        showNotice('error', '提示', '请输入电梯型号')
        return
      }
      if (t === 0) {
        this.handleCreateAdd(this.data)
      } else {
        this.handleUpdate(this.data)
      }
    },
    // 新增电梯型号
    handleCreateAdd(data) {
      createModelAdd(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    // 修改电梯型号
    handleUpdate(data) {
      updateModelArticle(data).then((res) => {
        if (res.code === '000000') {
          showNotice('success', '提示', '保存成功!')
          this.$emit('handleRefresh')
          this.$emit('handleCloseDialog')
        } else {
          // showNotice('error', '提示', res.msg)
        }
      })
    },
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
      this.$emit('handleRefresh')
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
@import '@/styles/public.scss';
.model {
  width: 600px;
  border-radius: 5px;
  background-color: #f5f5f5;
  margin: 0 auto;
  .panelWrap {
     min-height: 420px;
    .model-main {
      .con {
        .co-row {
          margin-left: -80px;
        }
        .con-row {
          padding: 10px 0 0 0;
          .name {
            width: 120px;
            text-align: right;
          }
          .input {
            width: 266px;
            margin-left: 3px;
          }
          .area-input {
            width: 266px;
          }
          .area-name {
            margin-top: -66px;
          }
          .el-textarea__inner {
            padding: 5px 0;
          }
        }
      }
      .footerBtn {
        .btn {
          width: 100px;
          height: 40px;
        }
      }
    }
  }
}
</style>
